<template>
  <div class="os-main">
    <ConfigForm v-model="dataForm" :config="config" ref="configFormRef" />

    <el-button type="primary" @click="openJson">查看表单数据</el-button>

    <el-drawer v-model="drawerVisiable" title="数据视图" :direction="'rtl'" size="40%">
      <CodeView :code-json="JSON.stringify(dataForm, null, '\t')"></CodeView>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import type { Config } from '@/components/ConfigForm'
import { ref } from 'vue';
import CodeView from '@/components/CodeView/index.vue'
import ConfigForm from '@/components/ConfigForm/index'

/**ConfigForm绑定对象 */
const dataForm = ref<ObjectAny>({})

/**ConfigForm配置 */
const config = ref<Config>({
  mode: 'add',
  formProps: {},
  rowProps: {},
  columns: [
    { prop: 'demo1', label: '基础用法', type: 'slider' },
    { prop: 'demo2', label: '自定义初始值', value: 10, type: 'slider' },
    { prop: 'demo3', label: '不显示提示', type: 'slider', props: { showTooltip: false } },
    { prop: 'demo4', label: '值处理', type: 'slider', props: { formatTooltip: (val: number) => val / 100 } },
    { prop: 'demo5', label: '禁用状态', type: 'slider', props: { disabled: true } },
    { prop: 'demo6', label: '离散值', type: 'slider', props: { step: 10, showStops: true } },
    { prop: 'demo7', label: '带有数字输入框', type: 'slider', props: { showInput: true } },
    { prop: 'demo8', label: '改变提示位置', type: 'slider', props: { placement: 'bottom' } },
    { prop: 'demo9', label: '范围选择', value: [4, 8], type: 'slider', props: { range: true, showStops: true, max: 10 } },
    { prop: 'demo10', label: '垂直模式', type: 'slider', props: { vertical: true, height: '200px' } },
    {
      prop: 'demo11', label: '显示标记', value: [30, 60], type: 'slider', props: {
        range: true, marks: {
          0: '0°C',
          8: '8°C',
          37: '37°C',
          50: {
            style: {
              color: '#1989FA',
            },
            label: '50%',
          },
        }
      }
    },
  ]
})

// 数据视图
const drawerVisiable = ref(false)
const openJson = () => {
  drawerVisiable.value = true
}
</script>